<template >
  <div >
    <el-container class="layout-container-demo" style="height: 1500px">
      <el-aside width="200px">
        <el-scrollbar class="leftcat">
          <el-menu >
            <el-sub-menu >
              <template #title>消息</template>
              <el-menu-item><router-link to="/communication">系统通知</router-link> </el-menu-item>
              <el-menu-item  > <router-link to="/communication/interaction">互动通知 </router-link></el-menu-item>

              <el-menu-item > <router-link to="/communication/orderForm">订单通知 </router-link></el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-container class="is-vertical">
        <el-header style="text-align: right; font-size: 12px">
          <div class="toolbar">
            <span>通知</span>
          </div>
        </el-header>

        <el-main>
          <router-view></router-view>
          <el-empty description="description" />

        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'


const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
</script>

<style scoped>
#app{
  /*background: pink;*/
}

.leftcat{
  margin-right: 20px;
  background-color: skyblue;
}
.layout-container-demo .el-menu {
  border-right: none;

}
.layout-container-demo .el-main {
  padding: 0;
}
.is-vertical {
  background-color: skyblue;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 20px;
  width: 1500px;
  height: 100%;
  right: 20px;
}
</style>



